<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统配置</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==1">配置列表</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==2">新增配置</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==3">修改配置</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

                <!--表格-->
        <el-row v-show='showPage==1'>
            <el-row :gutter="10">
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='add'>新增配置</el-button>
                </el-col>
            </el-row>
             <el-row style="margin-top:10px">
                <el-table :data="table.tableData" border stripe style="width: 100%" 
                size="small" :highlight-current-row="true" ref="multipleTable">
                    <el-table-column
                        label="序号"
                        prop="indexNum"
                        min-width="80"
                    ></el-table-column>
                    <el-table-column
                        label="名称"
                        prop="name"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column
                        label="code"
                        prop="code"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column
                        label="内容"
                        prop="value"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column
                        label="创建时间"
                        prop="createTime"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column
                        label="修改时间"
                        prop="updateTime"
                        min-width="150"
                    ></el-table-column>
                    <el-table-column label="操作" min-width="150">
                        <template slot-scope="scope">
                            <template>
                                <el-button type="text" @click="modify(scope.row)">修改</el-button>
                                <el-button type="text" @click="toDelete(scope.row)">删除</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
             </el-row>

        </el-row>

        <!-- 新增修改 -->
        <el-row v-if="showPage==2 || showPage==3">
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='showPage=1'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-form style="margin-top:10px;" label-position='right' label-width='100px' :model='addForm'
                ref='addForm' size='small' :rules='addForm.rules'>
                    <el-form-item label="配置名称" prop="name">
                        <el-input style="width:500px;" v-model="addForm.name" placeholder="请输入配置名称"></el-input>
                    </el-form-item>
                    <el-form-item label="配置code" prop="code">
                        <el-input style="width:500px;" v-model="addForm.code" placeholder="请输入配置code"></el-input>
                    </el-form-item>
                    <el-form-item label="配置内容" prop='value'>
                        <el-input type="textarea" :rows="4" style="width:500px;" v-model="addForm.value" placeholder="请输入配置内容"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-row>   
        </el-row>

    </div>
</template>
<script>
export default {
    data() {
        return {
            showPage: 1,
            table: {
                tableData: []
            },
             addForm: {
                 id: '',
                 name: '',
                 code: '',
                 value: '',
                 rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {
                            min: 2,
                            max: 20,
                            message: "长度2-20之间"
                        }
                    ],
                    code: [
                        {required: true, message: '请输入code', trigger: 'blur'},
                        {
                            min: 2,
                            max: 30,
                            message: "长度2-30之间"
                        }
                    ],
                    value: [
                        {required: true, message: '请输入code', trigger: 'blur'},
                        {
                            min: 1,
                            max: 200,
                            message: "长度1-200之间"
                        }
                    ]
                }
             }
        }
    },
    methods: {
     
        add(){
            this.addForm.id = '';
            this.addForm.name = '';
            this.addForm.code = '';
            this.addForm.value = '';
            this.showPage = 2;
        },
        modify(row){
            this.addForm.id = row.id;
            this.addForm.name = row.name;
            this.addForm.code = row.code;
            this.addForm.value = row.value;
            this.showPage = 3;
        },
        toDelete(row){
            this.$confirm('确定删除该配置吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        })
            .then(() => {
                let p = {};
                let url = '/api/configItem/delete';
                p.id = row.id;
                return this.$http.fetch(url, p)
            })
            .then(res => {
                this.listAll();
            })
            .catch(() => {
                
            })
        },
        listAll(){
            let p = {};
            let url = '/api/configItem/listAll';
            this.$http.fetch(url, p)
            .then(res=>{
                this.table.tableData = res.data;
            })
        },
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    let p = {};
                    let url;
                    // 新增
                    if(this.showPage==2){
                        url = '/api/configItem/add';
                    }else{
                        url = '/api/configItem/modify';
                        p.id = this.addForm.id;
                    }
                    p.name = this.addForm.name;
                    p.code = this.addForm.code;
                    p.value = this.addForm.value;
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.listAll();
                        this.showPage = 1;
                    })
                }
            });
        }
    },
    mounted(){
        this.listAll();
    }
}
</script>
<style scoped>

</style>
